labellayer.js ➔ define - Code Metrics - Inspection of "[TASK] Move layer genertation to layer" - ffrgb/meshviewer - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Pull Request — develop (#128)

by Xaver

created 2017-04-26 22:10 UTC

labellayer.js ➔ define B

↳ Parent: lib/map/labellayer.js

Complexity

Conditions	1
Paths	2

Size

Total Lines

351

Duplication

Lines	0
Ratio	0 %

Importance

Changes	1
Bugs	0	Features	0

Metric	Value
cc	1
c	1
b	0
f	0
nc	2
dl	0
loc	351
rs	8.2857
nop	4

13 Functions

Rating	Name	Size	Complexity
A	labellayer.js ➔ ... ➔ labelRect	23	1
A	labellayer.js ➔ ... ➔ mapRTree	3	1
A	labellayer.js ➔ ... ➔ prepareLabel	15	1
A	labellayer.js ➔ ... ➔ calcOffset	4	1
A	labellayer.js ➔ ... ➔ measureText	4	1
A	labellayer.js ➔ ... ➔ L.GridLayer.extend.onAdd	6	2
A	labellayer.js ➔ ... ➔ L.GridLayer.extend.updateLayer	5	2
A	labellayer.js ➔ ... ➔ L.GridLayer.extend.createTile	52	2
B	labellayer.js ➔ ... ➔ L.GridLayer.extend.prepareLabels	94	3
A	labellayer.js ➔ ... ➔ mkMarker	18	1
A	labellayer.js ➔ ... ➔ getIcon	3	1
B	labellayer.js ➔ ... ➔ addLinksToMap	29	1
A	labellayer.js ➔ ... ➔ L.GridLayer.extend.setData	61	2

How to fix Long Method

define(['leaflet', 'rbush', 'helper', 'moment'],
  function (L, rbush, helper, moment) {
    'use strict';

    var groupOnline;
    var groupOffline;
    var groupNew;
    var groupLost;
    var groupLines;

    var labelLocations = [['left', 'middle', 0 / 8],
      ['center', 'top', 6 / 8],
      ['right', 'middle', 4 / 8],
      ['left', 'top', 7 / 8],
      ['left', 'ideographic', 1 / 8],
      ['right', 'top', 5 / 8],
      ['center', 'ideographic', 2 / 8],
      ['right', 'ideographic', 3 / 8]];
    var labelShadow;
    var bodyStyle = { fontFamily: 'sans-serif' };
    var nodeRadius = 4;

    var cFont = document.createElement('canvas').getContext('2d');

    function measureText(font, text) {
      cFont.font = font;
      return cFont.measureText(text);
    }

    function mapRTree(d) {
      return { minX: d.position.lat, minY: d.position.lng, maxX: d.position.lat, maxY: d.position.lng, label: d };
    }

    function prepareLabel(fillStyle, fontSize, offset, stroke) {
      return function (d) {
        var font = fontSize + 'px ' + bodyStyle.fontFamily;
        return {
          position: L.latLng(d.nodeinfo.location.latitude, d.nodeinfo.location.longitude),
          label: d.nodeinfo.hostname,
          offset: offset,
          fillStyle: fillStyle,
          height: fontSize * 1.2,
          font: font,
          stroke: stroke,
          width: measureText(font, d.nodeinfo.hostname).width
        };
      };
    }

    function calcOffset(offset, loc) {
      return [offset * Math.cos(loc[2] * 2 * Math.PI),
        offset * Math.sin(loc[2] * 2 * Math.PI)];
    }

    function labelRect(p, offset, anchor, label, minZoom, maxZoom, z) {
      var margin = 1 + 1.41 * (1 - (z - minZoom) / (maxZoom - minZoom));

      var width = label.width * margin;
      var height = label.height * margin;

      var dx = {
        left: 0,
        right: -width,
        center: -width / 2
      };

      var dy = {
        top: 0,
        ideographic: -height,
        middle: -height / 2
      };

      var x = p.x + offset[0] + dx[anchor[0]];
      var y = p.y + offset[1] + dy[anchor[1]];

      return { minX: x, minY: y, maxX: x + width, maxY: y + height };
    }

    function mkMarker(dict, iconFunc, router) {
      return function (d) {
        var m = L.circleMarker([d.nodeinfo.location.latitude, d.nodeinfo.location.longitude], iconFunc(d));

        m.resetStyle = function resetStyle() {
          m.setStyle(iconFunc(d));
        };

        m.on('click', function () {
          router.fullUrl({ node: d.nodeinfo.node_id });
        });
        m.bindTooltip(d.nodeinfo.hostname);

        dict[d.nodeinfo.node_id] = m;

        return m;
      };
    }

    function addLinksToMap(dict, linkScale, graph, router) {
      graph = graph.filter(function (d) {
        return 'distance' in d && !d.vpn;
      });

      return graph.map(function (d) {
        var opts = {
          color: linkScale(1 / d.tq),
          weight: 4,
          opacity: 0.5,
          dashArray: 'none'
        };

        var line = L.polyline(d.latlngs, opts);

        line.resetStyle = function resetStyle() {
          line.setStyle(opts);
        };

        line.bindTooltip(d.source.node.nodeinfo.hostname + ' – ' + d.target.node.nodeinfo.hostname + '<br><strong>' + helper.showDistance(d) + ' / ' + helper.showTq(d) + '</strong>');
        line.on('click', function () {
          router.fullUrl({ link: d.id });
        });

        dict[d.id] = line;

        return line;
      });
    }

    function getIcon(config, color) {
      return Object.assign({}, config.icon.base, config.icon[color]);
    }

    return L.GridLayer.extend({
      onAdd: function (map) {
        L.GridLayer.prototype.onAdd.call(this, map);
        if (this.data) {
          this.prepareLabels();
        }
      },
      setData: function (data, map, nodeDict, linkDict, linkScale, router, config) {
        var iconOnline = getIcon(config, 'online');
        var iconOffline = getIcon(config, 'offline');
        var iconLost = getIcon(config, 'lost');
        var iconAlert = getIcon(config, 'alert');
        var iconNew = getIcon(config, 'new');
        // Check if init or data is already set
        if (groupLines) {
          groupOffline.clearLayers();
          groupOnline.clearLayers();
          groupNew.clearLayers();
          groupLost.clearLayers();
          groupLines.clearLayers();
        }

        var lines = addLinksToMap(linkDict, linkScale, data.graph.links, router);
        groupLines = L.featureGroup(lines).addTo(map);

        var nodesOnline = helper.subtract(data.nodes.all.filter(helper.online), data.nodes.new);
        var nodesOffline = helper.subtract(data.nodes.all.filter(helper.offline), data.nodes.lost);

        var markersOnline = nodesOnline.filter(helper.hasLocation)
          .map(mkMarker(nodeDict, function () {
            return iconOnline;
          }, router));

        var markersOffline = nodesOffline.filter(helper.hasLocation)
          .map(mkMarker(nodeDict, function () {
            return iconOffline;
          }, router));

        var markersNew = data.nodes.new.filter(helper.hasLocation)
          .map(mkMarker(nodeDict, function () {
            return iconNew;
          }, router));

        var markersLost = data.nodes.lost.filter(helper.hasLocation)
          .map(mkMarker(nodeDict, function (d) {
            if (d.lastseen.isAfter(moment(data.now).subtract(config.maxAgeAlert, 'days'))) {
              return iconAlert;
            }

            if (d.lastseen.isAfter(moment(data.now).subtract(config.maxAge, 'days'))) {
              return iconLost;
            }
            return null;
          }, router));

        groupOffline = L.featureGroup(markersOffline).addTo(map);
        groupLost = L.featureGroup(markersLost).addTo(map);
        groupOnline = L.featureGroup(markersOnline).addTo(map);
        groupNew = L.featureGroup(markersNew).addTo(map);

        this.data = {
          online: nodesOnline.filter(helper.hasLocation),
          offline: nodesOffline.filter(helper.hasLocation),
          new: data.nodes.new.filter(helper.hasLocation),
          lost: data.nodes.lost.filter(helper.hasLocation)
        };
        this.updateLayer();
      },
      updateLayer: function () {
        if (this._map) {
          this.prepareLabels();
        }
      },
      prepareLabels: function () {
        var d = this.data;

        // label:
        // - position (WGS84 coords)
        // - offset (2D vector in pixels)
        // - anchor (tuple, textAlignment, textBaseline)
        // - minZoom (inclusive)
        // - label (string)
        // - color (string)

        var labelsOnline = d.online.map(prepareLabel(null, 11, 8, true));
        var labelsOffline = d.offline.map(prepareLabel('rgba(212, 62, 42, 0.9)', 9, 5, false));
        var labelsNew = d.new.map(prepareLabel('rgba(48, 99, 20, 0.9)', 11, 8, true));
        var labelsLost = d.lost.map(prepareLabel('rgba(212, 62, 42, 0.9)', 11, 8, true));

        var labels = []
          .concat(labelsNew)
          .concat(labelsLost)
          .concat(labelsOnline)
          .concat(labelsOffline);

        var minZoom = this.options.minZoom;
        var maxZoom = this.options.maxZoom;

        var trees = [];

        var map = this._map;

        function nodeToRect(z) {
          return function (n) {
            var p = map.project(n.position, z);
            return { minX: p.x - nodeRadius, minY: p.y - nodeRadius, maxX: p.x + nodeRadius, maxY: p.y + nodeRadius };
          };
        }

        for (var z = minZoom; z <= maxZoom; z++) {
          trees[z] = rbush(9);
          trees[z].load(labels.map(nodeToRect(z)));
        }

        labels = labels.map(function (n) {
          var best = labelLocations.map(function (loc) {
            var offset = calcOffset(n.offset, loc);
            var i;

            for (i = maxZoom; i >= minZoom; i--) {
              var p = map.project(n.position, i);
              var rect = labelRect(p, offset, loc, n, minZoom, maxZoom, i);
              var candidates = trees[i].search(rect);

              if (candidates.length > 0) {
                break;
              }
            }

            return { loc: loc, z: i + 1 };
          }).filter(function (k) {
            return k.z <= maxZoom;
          }).sort(function (a, b) {
            return a.z - b.z;
          })[0];

          if (best !== undefined) {
            n.offset = calcOffset(n.offset, best.loc);
            n.minZoom = best.z;
            n.anchor = best.loc;

            for (var i = maxZoom; i >= best.z; i--) {
              var p = map.project(n.position, i);
              var rect = labelRect(p, n.offset, best.loc, n, minZoom, maxZoom, i);
              trees[i].insert(rect);
            }

            return n;
          }
          return undefined;
        }).filter(function (n) {
          return n !== undefined;
        });

        this.margin = 16;

        if (labels.length > 0) {
          this.margin += labels.map(function (n) {
            return n.width;
          }).sort().reverse()[0];
        }

        this.labels = rbush(9);
        this.labels.load(labels.map(mapRTree));

        this.redraw();
      },
      createTile: function (tilePoint) {
        var tile = L.DomUtil.create('canvas', 'leaflet-tile');

        var tileSize = this.options.tileSize;
        tile.width = tileSize;
        tile.height = tileSize;

        if (!this.labels) {
          return tile;
        }

        var s = tilePoint.multiplyBy(tileSize);
        var map = this._map;
        bodyStyle = window.getComputedStyle(document.querySelector('body'));
        labelShadow = bodyStyle.backgroundColor.replace(/rgb/i, 'rgba').replace(/\)/i, ',0.7)');

        function projectNodes(d) {
          var p = map.project(d.label.position);

          p.x -= s.x;
          p.y -= s.y;

          return { p: p, label: d.label };
        }

        var bbox = helper.getTileBBox(s, map, tileSize, this.margin);
        var labels = this.labels.search(bbox).map(projectNodes);
        var ctx = tile.getContext('2d');

        ctx.lineWidth = 5;
        ctx.strokeStyle = labelShadow;
        ctx.miterLimit = 2;

        function drawLabel(d) {
          ctx.font = d.label.font;
          ctx.textAlign = d.label.anchor[0];
          ctx.textBaseline = d.label.anchor[1];
          ctx.fillStyle = d.label.fillStyle === null ? bodyStyle.color : d.label.fillStyle;

          if (d.label.stroke) {
            ctx.strokeText(d.label.label, d.p.x + d.label.offset[0], d.p.y + d.label.offset[1]);
          }

          ctx.fillText(d.label.label, d.p.x + d.label.offset[0], d.p.y + d.label.offset[1]);
        }

        labels.filter(function (d) {
          return tilePoint.z >= d.label.minZoom;
        }).forEach(drawLabel);

        return tile;
      }
    });
  });


1			define(['leaflet', 'rbush', 'helper', 'moment'],
2			function (L, rbush, helper, moment) {
3			'use strict';
4
5			var groupOnline;
6			var groupOffline;
7			var groupNew;
8			var groupLost;
9			var groupLines;
10
11			var labelLocations = [['left', 'middle', 0 / 8],
12			['center', 'top', 6 / 8],
13			['right', 'middle', 4 / 8],
14			['left', 'top', 7 / 8],
15			['left', 'ideographic', 1 / 8],
16			['right', 'top', 5 / 8],
17			['center', 'ideographic', 2 / 8],
18			['right', 'ideographic', 3 / 8]];
19			var labelShadow;
20			var bodyStyle = { fontFamily: 'sans-serif' };
21			var nodeRadius = 4;
22
23			var cFont = document.createElement('canvas').getContext('2d');
24
25			function measureText(font, text) {
26			cFont.font = font;
27			return cFont.measureText(text);
28			}
29
30			function mapRTree(d) {
31			return { minX: d.position.lat, minY: d.position.lng, maxX: d.position.lat, maxY: d.position.lng, label: d };
32			}
33
34			function prepareLabel(fillStyle, fontSize, offset, stroke) {
35			return function (d) {
36			var font = fontSize + 'px ' + bodyStyle.fontFamily;
37			return {
38			position: L.latLng(d.nodeinfo.location.latitude, d.nodeinfo.location.longitude),
39			label: d.nodeinfo.hostname,
40			offset: offset,
41			fillStyle: fillStyle,
42			height: fontSize * 1.2,
43			font: font,
44			stroke: stroke,
45			width: measureText(font, d.nodeinfo.hostname).width
46			};
47			};
48			}
49
50			function calcOffset(offset, loc) {
51			return [offset * Math.cos(loc[2] * 2 * Math.PI),
52			offset * Math.sin(loc[2] * 2 * Math.PI)];
53			}
54
55			function labelRect(p, offset, anchor, label, minZoom, maxZoom, z) {
56			var margin = 1 + 1.41 * (1 - (z - minZoom) / (maxZoom - minZoom));
57
58			var width = label.width * margin;
59			var height = label.height * margin;
60
61			var dx = {
62			left: 0,
63			right: -width,
64			center: -width / 2
65			};
66
67			var dy = {
68			top: 0,
69			ideographic: -height,
70			middle: -height / 2
71			};
72
73			var x = p.x + offset[0] + dx[anchor[0]];
74			var y = p.y + offset[1] + dy[anchor[1]];
75
76			return { minX: x, minY: y, maxX: x + width, maxY: y + height };
77			}
78
79			function mkMarker(dict, iconFunc, router) {
80			return function (d) {
81			var m = L.circleMarker([d.nodeinfo.location.latitude, d.nodeinfo.location.longitude], iconFunc(d));
82
83			m.resetStyle = function resetStyle() {
84			m.setStyle(iconFunc(d));
85			};
86
87			m.on('click', function () {
88			router.fullUrl({ node: d.nodeinfo.node_id });
89			});
90			m.bindTooltip(d.nodeinfo.hostname);
91
92			dict[d.nodeinfo.node_id] = m;
93
94			return m;
95			};
96			}
97
98			function addLinksToMap(dict, linkScale, graph, router) {
99			graph = graph.filter(function (d) {
100			return 'distance' in d && !d.vpn;
101			});
102
103			return graph.map(function (d) {
104			var opts = {
105			color: linkScale(1 / d.tq),
106			weight: 4,
107			opacity: 0.5,
108			dashArray: 'none'
109			};
110
111			var line = L.polyline(d.latlngs, opts);
112
113			line.resetStyle = function resetStyle() {
114			line.setStyle(opts);
115			};
116
117			line.bindTooltip(d.source.node.nodeinfo.hostname + ' – ' + d.target.node.nodeinfo.hostname + '<br><strong>' + helper.showDistance(d) + ' / ' + helper.showTq(d) + '</strong>');
118			line.on('click', function () {
119			router.fullUrl({ link: d.id });
120			});
121
122			dict[d.id] = line;
123
124			return line;
125			});
126			}
127
128			function getIcon(config, color) {
129			return Object.assign({}, config.icon.base, config.icon[color]);
130			}
131
132			return L.GridLayer.extend({
133			onAdd: function (map) {
134			L.GridLayer.prototype.onAdd.call(this, map);
135			if (this.data) {
136			this.prepareLabels();
137			}
138			},
139			setData: function (data, map, nodeDict, linkDict, linkScale, router, config) {
140			var iconOnline = getIcon(config, 'online');
141			var iconOffline = getIcon(config, 'offline');
142			var iconLost = getIcon(config, 'lost');
143			var iconAlert = getIcon(config, 'alert');
144			var iconNew = getIcon(config, 'new');
145			// Check if init or data is already set
146			if (groupLines) {
147			groupOffline.clearLayers();
148			groupOnline.clearLayers();
149			groupNew.clearLayers();
150			groupLost.clearLayers();
151			groupLines.clearLayers();
152			}
153
154			var lines = addLinksToMap(linkDict, linkScale, data.graph.links, router);
155			groupLines = L.featureGroup(lines).addTo(map);
156
157			var nodesOnline = helper.subtract(data.nodes.all.filter(helper.online), data.nodes.new);
158			var nodesOffline = helper.subtract(data.nodes.all.filter(helper.offline), data.nodes.lost);
159
160			var markersOnline = nodesOnline.filter(helper.hasLocation)
161			.map(mkMarker(nodeDict, function () {
162			return iconOnline;
163			}, router));
164
165			var markersOffline = nodesOffline.filter(helper.hasLocation)
166			.map(mkMarker(nodeDict, function () {
167			return iconOffline;
168			}, router));
169
170			var markersNew = data.nodes.new.filter(helper.hasLocation)
171			.map(mkMarker(nodeDict, function () {
172			return iconNew;
173			}, router));
174
175			var markersLost = data.nodes.lost.filter(helper.hasLocation)
176			.map(mkMarker(nodeDict, function (d) {
177			if (d.lastseen.isAfter(moment(data.now).subtract(config.maxAgeAlert, 'days'))) {
178			return iconAlert;
179			}
180
181			if (d.lastseen.isAfter(moment(data.now).subtract(config.maxAge, 'days'))) {
182			return iconLost;
183			}
184			return null;
185			}, router));
186
187			groupOffline = L.featureGroup(markersOffline).addTo(map);
188			groupLost = L.featureGroup(markersLost).addTo(map);
189			groupOnline = L.featureGroup(markersOnline).addTo(map);
190			groupNew = L.featureGroup(markersNew).addTo(map);
191
192			this.data = {
193			online: nodesOnline.filter(helper.hasLocation),
194			offline: nodesOffline.filter(helper.hasLocation),
195			new: data.nodes.new.filter(helper.hasLocation),
196			lost: data.nodes.lost.filter(helper.hasLocation)
197			};
198			this.updateLayer();
199			},
200			updateLayer: function () {
201			if (this._map) {
202			this.prepareLabels();
203			}
204			},
205			prepareLabels: function () {
206			var d = this.data;
207
208			// label:
209			// - position (WGS84 coords)
210			// - offset (2D vector in pixels)
211			// - anchor (tuple, textAlignment, textBaseline)
212			// - minZoom (inclusive)
213			// - label (string)
214			// - color (string)
215
216			var labelsOnline = d.online.map(prepareLabel(null, 11, 8, true));
217			var labelsOffline = d.offline.map(prepareLabel('rgba(212, 62, 42, 0.9)', 9, 5, false));
218			var labelsNew = d.new.map(prepareLabel('rgba(48, 99, 20, 0.9)', 11, 8, true));
219			var labelsLost = d.lost.map(prepareLabel('rgba(212, 62, 42, 0.9)', 11, 8, true));
220
221			var labels = []
222			.concat(labelsNew)
223			.concat(labelsLost)
224			.concat(labelsOnline)
225			.concat(labelsOffline);
226
227			var minZoom = this.options.minZoom;
228			var maxZoom = this.options.maxZoom;
229
230			var trees = [];
231
232			var map = this._map;
233
234			function nodeToRect(z) {
235			return function (n) {
236			var p = map.project(n.position, z);
237			return { minX: p.x - nodeRadius, minY: p.y - nodeRadius, maxX: p.x + nodeRadius, maxY: p.y + nodeRadius };
238			};
239			}
240
241			for (var z = minZoom; z <= maxZoom; z++) {
242			trees[z] = rbush(9);
243			trees[z].load(labels.map(nodeToRect(z)));
244			}
245
246			labels = labels.map(function (n) {
247			var best = labelLocations.map(function (loc) {
248			var offset = calcOffset(n.offset, loc);
249			var i;
250
251			for (i = maxZoom; i >= minZoom; i--) {
252			var p = map.project(n.position, i);
253			var rect = labelRect(p, offset, loc, n, minZoom, maxZoom, i);
254			var candidates = trees[i].search(rect);
255
256			if (candidates.length > 0) {
257			break;
258			}
259			}
260
261			return { loc: loc, z: i + 1 };
262			}).filter(function (k) {
263			return k.z <= maxZoom;
264			}).sort(function (a, b) {
265			return a.z - b.z;
266			})[0];
267
268			if (best !== undefined) {
269			n.offset = calcOffset(n.offset, best.loc);
270			n.minZoom = best.z;
271			n.anchor = best.loc;
272
273			for (var i = maxZoom; i >= best.z; i--) {
274			var p = map.project(n.position, i);
275			var rect = labelRect(p, n.offset, best.loc, n, minZoom, maxZoom, i);
276			trees[i].insert(rect);
277			}
278
279			return n;
280			}
281			return undefined;
282			}).filter(function (n) {
283			return n !== undefined;
284			});
285
286			this.margin = 16;
287
288			if (labels.length > 0) {
289			this.margin += labels.map(function (n) {
290			return n.width;
291			}).sort().reverse()[0];
292			}
293
294			this.labels = rbush(9);
295			this.labels.load(labels.map(mapRTree));
296
297			this.redraw();
298			},
299			createTile: function (tilePoint) {
300			var tile = L.DomUtil.create('canvas', 'leaflet-tile');
301
302			var tileSize = this.options.tileSize;
303			tile.width = tileSize;
304			tile.height = tileSize;
305
306			if (!this.labels) {
307			return tile;
308			}
309
310			var s = tilePoint.multiplyBy(tileSize);
311			var map = this._map;
312			bodyStyle = window.getComputedStyle(document.querySelector('body'));
313			labelShadow = bodyStyle.backgroundColor.replace(/rgb/i, 'rgba').replace(/\)/i, ',0.7)');
314
315			function projectNodes(d) {
316			var p = map.project(d.label.position);
317
318			p.x -= s.x;
319			p.y -= s.y;
320
321			return { p: p, label: d.label };
322			}
323
324			var bbox = helper.getTileBBox(s, map, tileSize, this.margin);
325			var labels = this.labels.search(bbox).map(projectNodes);
326			var ctx = tile.getContext('2d');
327
328			ctx.lineWidth = 5;
329			ctx.strokeStyle = labelShadow;
330			ctx.miterLimit = 2;
331
332			function drawLabel(d) {
333			ctx.font = d.label.font;
334			ctx.textAlign = d.label.anchor[0];
335			ctx.textBaseline = d.label.anchor[1];
336			ctx.fillStyle = d.label.fillStyle === null ? bodyStyle.color : d.label.fillStyle;
337
338			if (d.label.stroke) {
339			ctx.strokeText(d.label.label, d.p.x + d.label.offset[0], d.p.y + d.label.offset[1]);
340			}
341
342			ctx.fillText(d.label.label, d.p.x + d.label.offset[0], d.p.y + d.label.offset[1]);
343			}
344
345			labels.filter(function (d) {
346			return tilePoint.z >= d.label.minZoom;
347			}).forEach(drawLabel);
348
349			return tile;
350			}
351			});
352			});
353

ffrgb / meshviewer

Pull Request — develop (#128)

labellayer.js ➔ define B

Complexity

Size

Duplication

Importance

13 Functions

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like